<template>
  <div class="lang">
    <span
      v-for="item in langList"
      :key="item.value"
      :class="{ active: item.value == cuurrentLang }"
      @click="changeLang(item.value)"
      >{{ item.name }}</span
    >
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { changeGlobalLang, currentGlobalLang } from "@/locale";
const cuurrentLang = ref(currentGlobalLang);
const langList = [
  {
    value: "zh-cn",
    name: "中",
  },
  {
    value: "en",
    name: "EN",
  },
];
function changeLang(lang) {
  //切换语言
  cuurrentLang.value = lang;
  changeGlobalLang(lang);
}
</script>
<style lang="scss" scoped>
.lang {
  margin-left: 24px;
  display: flex;
  border-radius: 2px;
  span {
    width: 28px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #fff;
    color: map-get($map: $bg-primary, $key: disabled);
    font-size: 12px;
    border: 1px solid map-get($map: $bg-primary, $key: shallow-disabled);
    cursor: pointer;
    &.active {
      background: map-get($map: $bg-primary, $key: shallow-disabled);
      color: map-get($map: $bg-primary, $key: static);
    }
  }
}
</style>
